.sign-in {
  width: 100%; height: 100%;
  background: #2d353c;

  > .content {
    position: fixed; left: 50%; top: 50%;
    width: 360px;
    margin-left: -180px;
    transform: translateY(-50%);

    &.shake.shake-add {
      animation: sign-in-shake .6s ease-in-out;
      animation-fill-mode: both;
    }

    @keyframes sign-in-shake {
      0%, 100% {
        transform: translate3d(0, -50%, 0);
      }

      10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-10px, -50%, 0);
      }

      20%, 40%, 60%, 80% {
        transform: translate3d(10px, -50%, 0);
      }
    }

    > .brand {
      display: block;
      margin: 0 auto 30px;
    }

    > .panel {
      margin-bottom: 10px;
    }

    > .nodercms {
      text-align: center;
      font-size: 12px;
      color: #777;

      > a { color: #777; }
      > a:hover { color: #fff; }
    }
  }
}